import React, { useEffect, useState } from "react";

/*
  useEffect是用来给函数组件添加生命周期用的

  useEffect执行没有返回值
  里面可以直接传入一个回调函数，相当于componentDidMount以及componentDidUpdate
  里面可以接收第二个参数，第二个参数是一个数组（依赖）
  第二个参数是一个空数组，那么就相当于componentDidMount
  第二个参数不是空数组，相当于componentDidMount以及watch
  第一个参数里面，如果是return函数，相当于是componentWillUnmount

  useEffect是可以写多个的

  如果我们调用封装好的数据请求的接口，需要写成函数自执行的方式
*/

const getData = () => {
  return fetch("http://www.pudge.wang:3080/api/rated/list")
    .then((response) => response.json())
    .then((res) => {
      return res;
    });
};

const App = () => {
  const [count, set_count] = useState(5);
  const [num, set_num] = useState(1);

  // useEffect(() => {
  //   console.log("1111");
  // });

  // useEffect(() => {
  //   console.log(count);
  // }, [count]);

  // useEffect(() => {
  //   return () => {
  //     console.log("unMount");
  //   };
  // }, []);

  // 关闭定时器
  // useEffect(() => {
  //   const timer = setInterval(() => {
  //     console.log(111);
  //     set_num((v) => v + 1);
  //   }, 1000);

  //   return () => {
  //     clearInterval(timer);
  //   };
  // }, []);

  useEffect(() => {
    (async () => {
      const res = await getData();
      console.log(res);
    })();
  }, []);

  const fn = () => {
    set_count((v) => v + 1);
  };
  const fn2 = () => {
    set_num((v) => v + 1);
  };

  return (
    <>
      <h3>useEffect</h3>
      <p>{count}</p>
      <button onClick={fn}>btn</button>
      <p>{num}</p>
      <button onClick={fn2}>btn</button>
    </>
  );
};

export default App;
